<template>
  <div class="mouse-follow-image">
    <slot></slot>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted} from "vue";

onMounted(() => {
  window.addEventListener('mousemove', move)
})

const move = () => {
  let div = document.getElementsByClassName('mouse-follow-image');
  if(div[0] != null){

    window.addEventListener('mousemove',function (ev){
      // 获取Dom元素位置
      // console.log(ev.pageX)
      // console.log(ev.pageY)
      // 设置Dom元素的位置
      // 注意：ev.pageX、ev.pageY是不带单位的，使用时需要加上单位px
      if(div[0] != null){
        div[0].style.left = (ev.pageX) + 'px'
        div[0].style.top = (ev.pageY) + 'px'
      }
    })
  }
}
onUnmounted(() => {
  window.removeEventListener('mousemove', move)
})
</script>

<style scoped>
.mouse-follow-image {
  color: azure;
  position: absolute;
  left: 10px;
  top: 10px;
  height: 10rem;
  width: 10rem;
  transition: transform 0.1s ease; /* 平滑移动效果 */

}
</style>